<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p10_固定定位全屏遮罩</title>
    <style>
        .mask{
            background-color: rgba(0,0,0,0.3);
            position: fixed;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="mask">
</div>
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid aperiam impedit neque quod vitae.
        Aliquid, consequuntur culpa dolore ducimus enim, error eveniet excepturi, molestias nostrum nulla pariatur
        placeat ullam.
    </div>
    <div>Accusantium beatae consequuntur culpa debitis enim hic, natus omnis quam quasi rem sapiente similique sunt
        suscipit tempore velit veritatis voluptatum! Alias aperiam cum cumque mollitia nemo quia repellendus tempora
        tenetur!
    </div>
    <div>Asperiores autem quod reprehenderit sint ut. Alias amet aspernatur beatae consectetur corporis cumque
        cupiditate deserunt dolor eligendi illo impedit iusto labore minima nobis officiis quia rem repellat sunt
        temporibus, totam?
    </div>
    <div>Adipisci atque cumque dignissimos dolorem est expedita harum impedit inventore ipsa ipsum magnam molestiae
        placeat quis quo rerum sapiente suscipit ullam velit vitae, voluptates? Ducimus esse facere ipsa magni odit?
    </div>
    <div>Aliquam facere impedit ipsa ipsum quos similique sunt tenetur? Accusantium molestiae necessitatibus quidem?
        Aperiam at cumque delectus deleniti dignissimos, iure labore laboriosam laborum officiis quasi quia, ratione
        reiciendis similique, voluptate.
    </div>
    <div>Adipisci architecto consequuntur error esse et expedita facere id in ipsum modi optio possimus, quaerat
        quisquam quod sint. A architecto distinctio eligendi, eum quasi quia voluptates. Autem doloribus quaerat ut.
    </div>
    <div>Aspernatur assumenda culpa explicabo labore magnam natus nemo nisi numquam officia placeat, provident sapiente
        similique, tempora! Aliquam, aliquid aspernatur cupiditate deserunt eius, hic impedit incidunt nisi odit
        provident quibusdam veniam?
    </div>
    <div>Dolores enim maxime nam quos ratione repellat tenetur unde. Aperiam asperiores distinctio ex exercitationem
        expedita fuga fugiat illo impedit ipsam iusto nobis obcaecati praesentium repudiandae similique, tenetur ullam
        voluptates voluptatum.
    </div>
    <div>Amet architecto deleniti earum eveniet fugiat ipsum, iure laboriosam nulla officia omnis optio qui quod ratione
        repellendus sit velit voluptates? Aut eaque eos, ex ipsam odit quaerat quas sint soluta?
    </div>
    <div>A accusamus accusantium, asperiores, at deserunt dignissimos dolor dolore dolores error excepturi facilis
        impedit in ipsa iusto maiores molestiae praesentium quam, quidem quisquam quos reiciendis rem repellat totam
        voluptas voluptatem.
    </div>
    <div>Autem dicta earum inventore minima odio recusandae sunt. Harum id magni necessitatibus neque officiis quaerat
        quibusdam quidem rem, sunt vitae. Excepturi facilis id ipsam molestiae quasi quisquam, recusandae saepe tempora!
    </div>
    <div>Est, fuga, sequi? Culpa cumque dolorum ducimus fugiat maiores molestias nostrum odit omnis pariatur quam quis
        quos sapiente, sequi voluptatem voluptatibus. Accusantium autem consequatur harum impedit magnam, nihil non quo?
    </div>
    <div>A ab aliquid asperiores autem consectetur dolore dolorum ducimus esse facilis fugiat hic incidunt itaque, nisi
        nostrum optio possimus quos tempore totam veniam voluptatum! Assumenda consequatur incidunt laudantium quos
        saepe.
    </div>
    <div>Ab architecto, asperiores deleniti ea est illum laudantium minima minus omnis pariatur perferendis placeat quis
        ratione reiciendis, suscipit tempore voluptatibus. Incidunt, modi natus optio reiciendis vel veniam. Cum,
        obcaecati, vero?
    </div>
    <div>Amet harum iste nemo non. Aut consequuntur dolor error necessitatibus, numquam odit officia quas quisquam
        repellat sunt. Accusamus consequatur dolorem est incidunt labore laudantium magnam qui quo quos reiciendis!
        Asperiores.
    </div>
    <div>Accusamus ad aliquam at beatae consectetur corporis culpa debitis dolorem eligendi eos harum incidunt laborum
        modi nam nemo nesciunt nisi officiis qui quo, recusandae rerum saepe sequi, totam, veniam veritatis.
    </div>
    <div>Consectetur ea, enim, esse illo magni modi nemo nesciunt nisi, nulla obcaecati optio perferendis ratione rerum
        totam unde veniam voluptatum! Commodi eius est ex repellendus veniam? Asperiores facilis natus pariatur?
    </div>
    <div>Asperiores assumenda aut cum deleniti eaque illum impedit laborum, non numquam obcaecati officia praesentium
        quod quos ratione soluta tenetur voluptatem! Adipisci aliquam atque in magnam obcaecati possimus quasi qui sunt?
    </div>
    <div>Alias autem, commodi deleniti dolorem ducimus, eveniet exercitationem fugit id illo ipsum molestiae non
        provident, quisquam tempora tempore. Aliquid assumenda fugit, illo ipsa minus numquam quisquam! Aperiam illum
        iure vero!
    </div>
    <div>Architecto dolor, dolore nam numquam possimus tempora tempore vero vitae. Aut beatae commodi cum dicta eaque,
        eius inventore perferendis quaerat? Cumque error exercitationem, inventore ipsa maxime molestiae porro rerum!
        Ipsam!
    </div>
    <div>Adipisci aliquam architecto commodi cum cumque delectus dolorum ea eos expedita fugiat laborum laudantium
        libero maxime modi nihil nobis, odit perferendis perspiciatis quibusdam repellendus saepe tenetur totam velit!
        Cupiditate, ducimus!
    </div>
    <div>A accusamus architecto at consectetur cupiditate deleniti enim esse est eveniet explicabo, laboriosam libero
        maiores modi mollitia nam odio perferendis quibusdam recusandae reprehenderit saepe similique vel voluptatum?
        Autem, ea, ipsum?
    </div>
    <div>Adipisci est eum fuga ipsum nulla ullam vel? Ad adipisci aliquam architecto atque blanditiis eos harum labore
        minima nam natus, necessitatibus nulla possimus quas quo ratione rerum voluptates. Expedita, velit?
    </div>
    <div>Ad aliquid amet architecto blanditiis cupiditate debitis, deleniti ea earum eos expedita fugit impedit labore
        officiis, recusandae reprehenderit veniam vero voluptatum? Ad deserunt non odit, provident quis quisquam
        similique ullam.
    </div>
    <div>Accusantium adipisci architecto beatae blanditiis cumque cupiditate dignissimos dolorem eligendi enim eveniet
        iste laboriosam magnam, magni minus modi nemo non officiis optio placeat possimus saepe soluta temporibus ullam
        vitae voluptatem?
    </div>
    <div>Commodi ea eaque eveniet inventore ipsa laboriosam, minima nostrum odio soluta unde ut, voluptatem voluptatum.
        Amet aperiam at error fugiat iure maxime, modi nobis provident quaerat quia quibusdam repellendus saepe.
    </div>
    <div>Earum odio repellat veniam voluptas. Consequatur corporis, excepturi exercitationem maxime mollitia nobis
        numquam sequi. Asperiores cumque dolores enim possimus quisquam ratione sunt suscipit vitae voluptatibus
        voluptatum! Beatae dolor ea quis!
    </div>
    <div>Accusamus amet aperiam corporis culpa doloremque eaque esse exercitationem expedita facilis fugiat id iusto
        molestiae nam neque nesciunt possimus praesentium quasi quo sit tempore vero, voluptatem, voluptates? Atque,
        illum, numquam.
    </div>
    <div>Accusantium consectetur deleniti dignissimos explicabo illum natus quae quia sed sequi veniam. Ab consectetur,
        distinctio dolore doloremque eveniet iste iure molestias, nulla obcaecati, officia qui quisquam recusandae
        repellendus tempora velit.
    </div>
    <div>Accusamus atque blanditiis dolore eaque eius, eligendi facilis fugiat ipsa iusto maiores neque, officia
        possimus quas quasi ratione repellendus sed, sit tempore? Animi ex recusandae repellendus sint voluptates.
        Cupiditate, dolorum!
    </div>
    <div>Architecto cum exercitationem ipsam labore laborum maiores nihil nostrum nulla odit, provident! Accusamus amet
        asperiores assumenda beatae dolorum eaque eveniet harum hic iusto magnam nulla pariatur, quia quis repellendus
        voluptates!
    </div>
    <div>A architecto assumenda autem delectus dolores excepturi exercitationem ipsa itaque iure maxime, nobis, quae quo
        saepe. Commodi ea id mollitia natus odio, optio sed sunt voluptate? Distinctio exercitationem quod soluta!
    </div>
    <div>Adipisci cupiditate excepturi in sunt voluptatibus. Amet aspernatur commodi culpa dicta eaque facere fugit, id
        ipsa ipsam magnam maxime minima natus nostrum obcaecati perferendis porro possimus sed sit tenetur voluptate!
    </div>
    <div>Aliquid aspernatur atque consectetur dignissimos doloremque eius error et expedita id illo illum ipsa iure
        iusto, laudantium magni minus nobis numquam possimus, quam quasi repudiandae rerum sed tenetur vel voluptatum?
    </div>
    <div>Aperiam autem error est excepturi pariatur tempora voluptatem! Accusamus autem blanditiis commodi ea facilis
        harum impedit libero magni nam nesciunt odio officia officiis perspiciatis porro provident sit, tempora unde ut.
    </div>
    <div>Animi aperiam consequatur corporis cumque delectus ducimus error esse et ex harum illum inventore iste labore
        laborum magnam molestiae, mollitia non perspiciatis porro, quae qui quo ut veritatis? Quo, suscipit!
    </div>
    <div>Amet architecto autem culpa cumque distinctio dolorem eius fugiat id illo impedit, laboriosam laborum minus
        nemo nesciunt nobis nulla odio omnis possimus, quidem sit soluta tempora ut. Delectus minima, unde.
    </div>
    <div>Adipisci alias, aut blanditiis corporis dolorum magnam nihil nobis placeat sequi velit! Accusamus adipisci
        aperiam architecto culpa cumque delectus dolorem doloribus ea iusto obcaecati, similique sunt voluptas.
        Laudantium, tempora voluptas.
    </div>
    <div>Ad ex nihil officia possimus quo. Aspernatur cumque deserunt dicta dolorem ducimus earum facere magni maxime
        perferendis quidem saepe similique, sunt unde vero voluptate voluptatem voluptatibus. Eaque magni saepe totam?
    </div>
    <div>Blanditiis consequatur cum delectus fuga fugiat laudantium optio possimus praesentium, quibusdam quo sed
        similique soluta ullam ut vero vitae voluptates. Culpa enim error ipsam nemo quasi qui saepe, sapiente.
        Reiciendis.
    </div>
    <div>Ad, at atque consequuntur, deserunt earum eius, fugit in ipsum labore nisi nulla officia possimus quia
        quibusdam quis ratione reiciendis. Accusamus aliquam amet asperiores autem eaque, nulla quas suscipit veniam.
    </div>
    <div>Atque cumque deserunt eligendi expedita ipsum libero maxime necessitatibus nihil nisi odio perspiciatis placeat
        porro recusandae, saepe sapiente sequi, similique sunt vel, voluptate voluptatibus. Deleniti eius incidunt
        laboriosam ullam veritatis!
    </div>
    <div>Architecto consequuntur fugiat labore soluta, tenetur unde. Architecto consectetur eos excepturi nulla quaerat
        quasi qui recusandae voluptatum! Alias deserunt dicta dolore eaque eos laboriosam nemo quia repudiandae sed
        voluptatem. Adipisci.
    </div>
    <div>Amet deserunt ea error maxime necessitatibus repellat saepe tempore. Aliquam animi architecto at cupiditate
        dolor enim exercitationem harum illo illum magni modi necessitatibus nostrum provident quas recusandae sapiente
        sint, tempore!
    </div>
    <div>Ab ad aperiam atque consectetur deserunt dolor earum esse, exercitationem illo illum ipsum laudantium, nesciunt
        non praesentium quo rerum tenetur vitae voluptatem. Accusamus aperiam cupiditate ipsa laborum minus modi ut.
    </div>
    <div>Blanditiis cumque cupiditate doloribus enim ipsa labore, laudantium nemo nihil quaerat voluptate! Accusamus
        alias aut, commodi, dolor ducimus ex incidunt neque nihil optio pariatur quam quisquam rerum saepe voluptatem
        voluptatibus!
    </div>
    <div>Esse fugit perferendis quis suscipit! Animi atque, blanditiis culpa ea earum eveniet fugit ipsam itaque placeat
        praesentium quasi quod reprehenderit saepe! Dolor ipsum magnam perferendis quaerat quis ullam voluptatibus!
        Eius!
    </div>
    <div>At autem consectetur culpa delectus deleniti dolor doloremque doloribus ducimus facere illo ipsam laborum,
        molestias neque nisi nobis nulla perferendis possimus quaerat recusandae repellat repudiandae sed suscipit
        veniam veritatis voluptatem!
    </div>
    <div>Adipisci eligendi exercitationem placeat quasi voluptates? Doloremque nam, temporibus. Accusantium aliquam,
        aspernatur corporis cupiditate eaque eius illo impedit laudantium libero natus, nulla officia quo repudiandae
        sequi veritatis, voluptate voluptates voluptatum!
    </div>
    <div>Dolorem dolores dolorum in ratione rem tempora veniam. Accusamus, aliquid aperiam assumenda cupiditate deserunt
        doloribus enim eos eum, exercitationem minus modi non, perspiciatis placeat provident quia recusandae repellat
        saepe sapiente.
    </div>
    <div>Cum delectus eum iusto, laudantium perferendis provident suscipit velit? Doloribus eum fugiat omnis repellendus
        vel. Eos vel, veritatis! Aliquam assumenda cum deleniti incidunt libero, officiis placeat praesentium soluta
        temporibus voluptatem.
    </div>
    <div>Adipisci atque dignissimos expedita laudantium, magni minus neque similique! Assumenda commodi dignissimos
        dolore dolorum ea eius non, nulla quibusdam ratione sit? Dicta facilis maxime officia placeat praesentium
        sapiente sequi temporibus.
    </div>
    <div>Ab accusamus aliquam aut consequatur deleniti, dolorem doloribus eius eos eum excepturi illo illum laboriosam
        libero maiores nam nihil nulla perferendis perspiciatis quam quas quasi quibusdam, quidem, quo quos veniam.
    </div>
    <div>Dolorum ea est expedita facilis id impedit, ipsam nesciunt perferendis quas quo quod totam, unde veniam. Alias
        dolorem est fugit ipsam iure magnam officia quos sit veniam voluptas. Adipisci, voluptatum?
    </div>
    <div>Aliquam amet aperiam architecto autem corporis, debitis earum eius esse est excepturi facilis illum in maxime
        mollitia quas quasi quisquam recusandae reiciendis rem repellat saepe tempora totam vero. Ipsam, repellendus?
    </div>
    <div>Accusantium aspernatur consequuntur, cupiditate deserunt distinctio ea eius exercitationem explicabo facilis id
        maxime nemo nihil, officiis, pariatur quam quibusdam repudiandae tempora tempore unde veniam. Accusantium
        consequatur deserunt excepturi fuga quisquam.
    </div>
    <div>Ab at atque cum dolorem excepturi expedita, facilis fugiat ipsa iure libero, necessitatibus nulla optio,
        pariatur perspiciatis quas quasi sit. Autem blanditiis consectetur culpa debitis hic necessitatibus placeat
        repellat voluptates.
    </div>
    <div>Accusamus adipisci, aperiam aspernatur atque dolor dolorem, eos eveniet ex molestiae nesciunt nobis possimus
        praesentium quis reprehenderit saepe sit sunt tempora vero! Deserunt dolore illo modi nobis placeat quibusdam
        veniam.
    </div>
    <div>Dolor eos iusto pariatur similique veniam? Accusantium eum impedit libero? A assumenda dignissimos id labore
        quidem ratione rerum totam! Consectetur dignissimos ea eius, eveniet illo itaque laudantium modi recusandae
        reiciendis!
    </div>
    <div>Aut dolorum eligendi minima nisi reiciendis. Ab autem deserunt explicabo facere impedit, itaque iusto magni
        maxime numquam pariatur placeat quam, quasi recusandae tempore ullam veniam veritatis voluptas voluptatem,
        voluptates voluptatibus?
    </div>

</div>
</body>
</html>